$(() => {

    //处理页脚链接
    arrLinks = ['北京', '广州', '上海', '深圳', '天津', '合肥', '西安', '重庆', '苏州', '济南', '武汉', '佛山', '南京']
    arrLinks2 = ['东莞', '郑州', '昆明', '青岛', '南昌', '杭州', '石家庄', '厦门', '宁波', '长沙', '福州', '成都']

    let htmlStr = ''
    let htmlstr2 = ''
    arrLinks.forEach(item => {
        htmlStr += `<li>
        <a href='#'>
          ${item}招聘
        </a>
        
      
        </li>`
    });
    arrLinks2.forEach(item => {
        htmlstr2 += `<li>
        <a href='#'>
          ${item}招聘
        </a>
        
      
        </li>`
    });

    $('.links ul').html(htmlStr)
    $('.links .hideUl').html(htmlstr2)

    $('footer label').click(function() {


        if ($('.fs').text() == '展开') {
            $('.hideUl').css('display', 'flex')
            $('.fs').text('收起')
            $('.fsi').css({
                background: 'url(./imgs/icons.png) 5px -810px'
            })
            $('.linksBox').height('auto')
        } else {
            $('.hideUl').hide()
            $('.fs').text('展开')
            $('.fsi').css({
                background: 'url(./imgs/icons.png) 5px -786px'
            })
        }

    })


    // 侧边栏
    $('.silderbar').hover(function() {
            $(".silderbar>div").width(60)
            $(".slider-top a").css({
                color: '#414a60'
            })

        },
        function() {
            $(".silderbar>div").width(40)
            $(".slider-top a").css({
                color: '#fff'
            })
        })


    $(".slider-top li").hover(function() {


        $(this).children().css({
            color: '#00d7c6'
        }).children().css({
            backgroundPositionX: '-21px'
        })


    }, function() {
        $(this).children().css({
            color: '#414a60'
        }).children().css({
            backgroundPositionX: '0px'
        })
    })

    //渲染页面
    $.ajax({
        url: '/getJobArr',
        type: 'post',
        dataType: 'json',
        async: true,
        success: res => {
            let con_str = ''
            let con_upjob = ''
            res.data.forEach(item => {
                con_str += `
                    <li>
                        <div class="top">
                            <div class="info">
                                <h4>
                                   ${item.job}
                                    <div class="info_icon"></div>
                                </h4>
                                <p>
                                    <span class="line">${item.area}</span>
                                    <span class="line">${item.workTime}</span>
                                    <span>${item.xueli}</span>
                                </p>
                            </div>
                            <div class="price">${item.price}</div>
                        </div>
                        <div class="bottom">
                            <div class="img_logo">
                                <img src="${item.imgUrl}" alt="">
                            </div>
                            <div class="con_info">
                                <span>${item.name}</span>
                                <span class="line">${item.hangye}</span>
                                <span>${item.rongzi}</span>
                            </div>
                        </div>
                    </li>

                `
            })

            res.data.reverse().forEach(item => {
                con_upjob += `
                    <li>
                        <div class="top">
                            <div class="info">
                                <h4>
                                   ${item.job}
                                    <div class="info_icon"></div>
                                </h4>
                                <p>
                                    <span class="line">${item.area}</span>
                                    <span class="line">${item.workTime}</span>
                                    <span>${item.xueli}</span>
                                </p>
                            </div>
                            <div class="price">${item.price}</div>
                        </div>
                        <div class="bottom">
                            <div class="img_logo">
                                <img src="${item.imgUrl}" alt="">
                            </div>
                            <div class="con_info">
                                <span>${item.name}</span>
                                <span class="line">${item.hangye}</span>
                                <span>${item.rongzi}</span>
                            </div>
                        </div>
                    </li>

                `
            })

            $('.up_job ul:eq(0)').html(con_str)
            $('.up_job ul:eq(1)').html(con_upjob).hide()



            let remen_str = ''

            res.hot_con.forEach(item => {
                remen_str += `

  <li>
                        <div class="com_logo">
                            <img src="${item.imgUrl}" alt="">
                        </div>
                        <div class="name">${item.name}</div>
                        <p>
                            ${item.rongzi}
                            <em class="vline"></em> ${item.hangye}
                        </p>

                        <div class="rezhao">
                            <span>${item.num}</span>个热招职位
                        </div>
                    </li>


`
            })

            $('.remen_com ul').html(remen_str)

            let con_str2 = ''
            res.con.forEach(item => {
                con_str2 += ` <li>
                        <div class="con_title">
                            <div class="con_logo">
                                <img src="${item.imgUrl}" alt="">
                            </div>
                            <div class="con_info">
                                <h4>${item.name}</h4>
                                <p>
                                 ${item.rongzi}
                                    <span class="vline"></span> ${item.people}
                                    <span class="vline"></span> ${item.hangye}
                                </p>
                            </div>
                        </div>

                        <div class="con_job">
                            <div class="con_top">
                                <div>
                                    <h4>
                                       ${item.jobs[0].job_name}
                                    </h4>
                                    <div class="con_icon"></div>
                                </div>

                                <div class="price"> ${item.jobs[0].price}</div>
                            </div>
                            <div class="con_bottom">
                                <span>${item.jobs[0].area}</span>
                                <span>${item.jobs[0].workTime}</span>
                                <span>${item.jobs[0].xueli}</span>
                            </div>

                        </div>


                        <div class="con_job">
                            <div class="con_top">
                                <div>
                                    <h4>
                                         ${item.jobs[1].job_name}

                                    </h4>
                                    <div class="con_icon"></div>
                                </div>

                                <div class="price">${item.jobs[1].price}</div>
                            </div>
                            <div class="con_bottom">
                                <span>${item.jobs[1].area}</span>
                                <span>${item.jobs[1].workTime}</span>
                                <span>${item.jobs[1].xueli}</span>
                            </div>
                        </div>
                        <div class="con_job">
                            <div class="con_top">
                                <div>
                                    <h4>
                                        ${item.jobs[2].job_name}

                                    </h4>
                                    <div class="con_icon"></div>

                                </div>

                                <div class="price">${item.jobs[2].price}</div>
                            </div>
                            <div class="con_bottom">
                                 <span>${item.jobs[2].area}</span>
                                <span>${item.jobs[2].workTime}</span>
                                <span>${item.jobs[2].xueli}</span>
                            </div>
                        </div>

                        <div class="more_job">
                            <a href="#">查看更多职位</a>
                        </div>
                    </li>

`
            })
            $('.up_job2 ul').html(con_str2)


            let school_str = ''
            for (let i = 0; i <= 5; i++) {
                school_str += ` <li>
                        <div class="com_info">
                            <div class="com_logo">
                                <img src="${res.hot_con[i].imgUrl}" alt="">
                            </div>
                            <div class="com_name">
                                <h4>${res.hot_con[i].name}</h4>
                                <p>
                                    <span>${res.hot_con[i].rongzi}</span>
                                    <em class="vline"></em>
                                    <span>${res.hot_con[i].people}人以上</span>
                                    <em class="vline"></em>
                                    <span>${res.hot_con[i].hangye}</span>
                                </p>
                            </div>
                        </div>
                        <div class="com_text">${res.hot_con[i].text}
                        </div>
                        <div class="com_link">
                            <a href="#">
                                <span>校招职位</span>
                                <span>></span>
                            </a>
                            <a href="#">
                                <span>实习职位</span>
                                <span>></span>
                            </a>
                        </div>
                    </li>`
            }

            $('.hot_company ul').html(school_str)



            let xiaozhaoStr = ''
            for (let i = 0; i < res.hot_con.length - 1; i++) {
                xiaozhaoStr += `<li>
                        <div class="com_job">
                            <span>【校招】${res.hot_con[i].job}</span>
                            <span>18-28K·16薪</span>
                        </div>
                        <p class="job_text">
                            北京
                            <em class="vline"></em> 在校/应届
                            <em class="vline"></em> 本科
                        </p>
                        <div class="com_txt">
                            <img src="${res.hot_con[i].imgUrl}" alt=""> ${res.hot_con[i].name}
                            <span>
                                互联网
                                <em class="vline"></em>
                                ${res.hot_con[i].rongzi}
                            </span>
                        </div>
                    </li>`
            }



            $('.quanzhi').html(xiaozhaoStr)

            let companyStr = ''
            let comArr = []
            comArr.push(...res.data)
            comArr.push(...res.data.reverse())
            comArr.push(...res.data)
            comArr.push(...res.data.reverse())
            comArr.forEach(item => {
                companyStr += `
                <li>
                        <div class="com_info">
                            <div class="com_logo">
                                <img src="${item.imgUrl}" alt="">
                            </div>
                            <div class="com_name">
                                <h3>${item.name}</h3>
                                <p>${item.rongzi}
                                    <em class="vline"></em>${item.hangye}
                                </p>
                            </div>
                        </div>
                        <div class="com_job">热招<span>${item.job}</span>20-40K</div>
                    </li>
                `
            })
            $('.company_box ul').html(companyStr)
        }
    })





    //滚动监听

    $(document).scroll(() => {

        if ($(document).scrollTop() <= $('header').height()) {
            $('.silderbar').css('top', -$(document).scrollTop() + $('header').height())

        } else {

            $('.silderbar').css('top', '0')

        }


    })







})